<template>
    <el-container>
        <el-header>
            <div style="padding-left: 0px;margin-left: 0px">
                <img src="../assets/QQ图片20220930101838.jpg" style="height: 60px;float: left;margin-left: -20px;width: 200px">
            </div>
            <span id="userAvatar">
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                        <el-avatar :src="userInfo.url"></el-avatar>
                    </span>
                    <el-dropdown-menu slot="dropdown" style="margin-top: -10px">
                        <el-dropdown-item command="getInfo">个人信息</el-dropdown-item>
                        <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </span>
<!--            个人信息-->
            <el-dialog
                    title="个人信息"
                    :visible.sync="userDialogVisible"
                    width="30%">
                <el-form    ref="userInfo" label-width="80px" :model="userInfo">
                       <span class="el-dropdown-link" id="avatar">
                            <el-avatar :src="userInfo.url"></el-avatar>
                        </span>
                    <el-form-item label="编号:" prop="userid">
                        <el-input readonly v-model="userInfo.userid" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称:" prop="usermonicker">
                        <el-input readonly v-model="userInfo.usermonicker" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="职位:" prop="rolename">
                        <el-input readonly v-model="userInfo.rolename" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电话:" prop="phone">
                        <el-input readonly v-model="userInfo.phone" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                         <el-button type="primary" @click="close">确 定</el-button>
                </span>
            </el-dialog>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        :router="true"
                        active-text-color="#ffd04b">
                    <LeftMenu :menu-data="leftMenu"></LeftMenu>
                </el-menu>
            </el-aside>
            <el-main>
                <!--渲染视图-->
                <router-view/>
            </el-main>
        </el-container>
        <el-footer>
            Footer
        </el-footer>
    </el-container>
</template>

<script>
    import LeftMenu from "@/components/LeftMenu";
    export default {
        name: "Home",
        components: {LeftMenu},
        data(){
          return{
              // 个人信息弹出层的状态
              userDialogVisible:false,
              // 用户的信息
              userInfo:{},
              leftMenu:[],
          }
        },
        created(){
            this.initMenu();
            this.getInfo();
        },
        methods:{
            // 关闭个人信息弹出层
            close(){
                this.userDialogVisible=false;
            },
            // 查询左侧菜单
            initMenu(){
                this.$http.post("/permission/permission/leftMenu").then(result=>{
                    console.log(result)
                    if (result.data.code==2000){
                        this.leftMenu=result.data.data;
                    }
                })
            },
            getInfo(){
                // 个人信息
                var token =  sessionStorage.getItem("token")
                this.$http.post("/permission/permission/personal?token="+token).then(result=>{
                    console.log(result)
                    if (result.data.code===2000){
                        this.userInfo=result.data.data.user;
                    }
                })
            },
            // 下拉框触发的事件
            handleCommand(command){
                // 退出
                if (command==='loginOut'){
                    this.$http.post("/permission/permission/logout").then(result=>{
                        console.log(result)
                        if (result.data.code===2000){
                            sessionStorage.clear();
                            this.$router.push("/login")
                        }
                    })
                }else  if (command==='getInfo'){
                    this.userDialogVisible=true;
                    this.getInfo();
                }
            }
        }
    }
</script>

<style>

    #userAvatar{
        float: right;
        display: inline-block;
        margin-top: 10px;
        margin-right: 20px;
    }
    body,#app{
        margin: 0px;
        padding: 0px;
    }
    html,body,#app,.el-container{
        height: 100%;
    }
    .el-aside>.el-menu{
        border: none;
    }
    .el-header, .el-footer {
        background-color: #1F272F;
        color: #333;
    }

    .el-aside {
        background-color: #545C64;
        color: #333;
        transition:height 1s;
        overflow:hidden;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

</style>